<template>
  <!-- 文本 -->
  <div id="SoftFood">
    <van-nav-bar title="视频列表" left-arrow left-text="返回" @click-left="onClickLeft" fixed placeholder></van-nav-bar>
    <div class="main">
      <div class="food" v-for="(val,index) in foodData" :key="val.id" @click="onChange(val)">
        <van-row type="flex" align="center">
          <van-col span="4">
            <div class="num">{{ index+1 }}</div>
          </van-col>
          <van-col span="18" :offset="6">
            <div class="title">{{val.title}}</div>
            <div class="content">
              <span v-for="list in val.info" :key="list">{{list}}</span>
            </div>
          </van-col>
        </van-row>
      </div>
    </div>
  </div>
</template>

<script>
import { chufangoption } from "@/apis/record";
import apiConfig from '../../../config/api.config';
export default {
  data() {
    return {
      apiConfig,
      hzid:null,
      item: "",
      foodData: [],
    };
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1); //返回上一层
      localStorage.setItem("selector",'#principle')
      if(localStorage.getItem("text") == '""'){
        localStorage.removeItem("text")
      }
      if(localStorage.getItem("video") == "undefined"){
        localStorage.removeItem("video")
      }
    },
    chufang() {
      chufangoption({hzid:this.hzid, ty: 5, pid: 0 })
        .then((res) => {
          this.foodData = res.data.list;
        })
        .catch((err) => {
          if(err.msg){
            this.$toast(err.msg);
          }else{
            this.$toast("网络错误"); 
          }
        });
    },
    onChange(val) {
      let form = JSON.parse(localStorage.getItem("exercise"));
      let obj = localStorage.getItem("video");
      obj = apiConfig.imgUrl  + val.video;
      localStorage.setItem("video", obj);
      localStorage.setItem("exercise", JSON.stringify(form));
      this.$router.go(-1);
      localStorage.setItem("selector",'#principle')
    },
  },
  mounted() {
    this.chufang();
  },
  created() {
    this.item = this.$route.params.item;
    this.hzid = localStorage.getItem('hzid')
  },
};
</script>

<style lang="less">
#SoftFood {
  text-align: left;
  .van-nav-bar {
    background-color: #f5f5f5;
    .van-icon,.van-nav-bar__text {
      color: #404040;
    }
  }
  .main {
    margin: 10px 10px;
  }
  .food {
    border-radius: 8px;
    margin: 10px 0;
    background-color: #fff;
    .van-row {
      position: relative;
    }
    .van-col {
      &:first-child {
        position: absolute;
        background-color: #4589ed;
        height: 100%;
        font-size: 30px;
        color: #fff;
        border-top-left-radius: 8px;
        border-bottom-left-radius: 8px;
        width: 25%;
      }
      .num {
        position: absolute;
        height: 42px;
        width: 100%;
        left: 50%;
        top: 50%;
        margin-left: -9px;
        margin-top: -18px;
      }
      .title {
        padding: 9px 0 0px 9px;
        font-weight: 600;
      }
      .content {
        padding: 9px 0 9px 9px;
        display: flex;
        flex-wrap: wrap;
        div {
          margin-bottom: 15px;
          &:last-child {
            margin-bottom: 0;
          }
        }
      }
    }
  }
}
</style>
